<template>
	<view>

		<view class="h-90 color-32 text-bold border">
			<view class="w-670">{{fdd.name}}({{fdd.code}})</view>
		</view>

		<view class="flex padding-top justify-between w-670">
			<view class="flex-sub fs-24 color-99">买入基金</view>
			<view class="flex-sub fs-24 color-99 text-right">交易规则</view>
		</view>


		<view class="buy w-670">
			<view class="buy-left">¥</view>
			<view class="buy-right">
				<input @input="priceTap" type="num" :class="[val>=100?'num':'pld']" v-model="val"
					placeholder="最低买入100.00元" />
			</view>
		</view>


		<view class="border">
			<view class="fs-24 color-47 padding-top padding-bottom w-670">
				<text>买入费率</text>
				<text style="text-decoration:line-through;">{{fdd.buySourceRate}}%</text>
				<text class="text-red">{{fdd.buyRate}}%</text>
				<text>,预计03月30日(星期二)，以03月29日（星期一)净值确认份额(卖出手续费详见交易规则)</text>
			</view>
		</view>

		<view class=" flex payMethod w-670">
			<view class="flex-sub fs-32 color-47">付款方式</view>
			<view class="flex-sub fs-24  text-right" @tap="choosePay">
				<view class=" fs-32 color-47">{{pay[0].name}}</view>
				<view class="color-99 ">最多支付{{pay[0].money}}.00元</view>
			</view>
		</view>

		<view class="flex justify-between padding-top padding-bottom w-670 ">
			<view class="flex-sub fs-32 color-47">定投周期</view>
			<view class="flex-sub fs-32 color-47 text-right" @tap="visible=true">

				<text>{{valuedate[0]}}</text>
				<text class="margin-left">{{valuedate[1]}}</text>
				<text class="cuIcon-right"></text>
				<!-- </lb-picker> -->

			</view>
		</view>
		<view class="flex justify-between w-670 fs-32 color-47 padding-top padding-bottom ">
			<view class="flex-sub">智能定投 </view>
			<switch checked="true" @change="" />
		</view>


		<view class=" bg-f8 margin-top">
			<view class="color-47 w-670">
				点击确定即表示您已知悉该基金的产品概要和投资人权益知等相关内容
			</view>
			<view class="padding-top w-670">
				<button class="cu-btn block text-white  btn-lg fs-32" :class="[(val>=100)?'after':'before']"
					@tap="confirm">确定</button>
			</view>
		</view>
		<payPass ref="verify" @finish="getCode"></payPass>
		<w-picker :visible.sync="visible" mode="linkage" :value="valuedate" :options="options" :level="2"
			default-type="id" @confirm="onConfirm($event,'linkage')" @cancel="onCancel" ref="linkage"></w-picker>
	</view>
</template>

<script>
	// import Buy from '@/components/common/buy.vue'
	// import LbPicker from '@/components/lb-picker'
	import wPicker from "@/components/w-picker/w-picker.vue";
	import payPass from '@/components/pay-pass/pay-pass.vue'
	import {
		createNamespacedHelpers
	} from 'vuex';
	const {
		mapActions,
		mapState
	} = createNamespacedHelpers('product')
	const {
		mapActions: orderMapActions,

	} = createNamespacedHelpers('order')
	const {
		mapActions: ordersMapActions,

	} = createNamespacedHelpers('orders')
	const {
		mapActions: UsersMapActions,
		mapState: UsersMapState,
		mapMutations: UsersMapMutations,
	} = createNamespacedHelpers("users");
	export default {
		components: {
			// Buy,
			payPass,
			wPicker
		},
		data() {
			return {
				visible: false,
				valuedate: ["每周", "周一"],
				val: '',
				fixedDate: 'week/1',
				payArr: [{
					name: '我的钱包',
					money: 1000
				}, {
					name: '工商银行(5510)',
					money: 20000
				}, {
					name: '农业银行(5510)',
					money: 10000
				}, {
					name: '建设银行(5510)',
					money: 8000
				}, {
					name: '中国银行(2510)',
					money: 150000
				}],
				pay: [{
					name: '我的钱包',
					money: 1000
				}],
				options: [{
						label: '每周',
						value: '每周',
						children: [{
							label: '周一',
							value: '周一',
						}, {
							label: '周二',
							value: '周二',
						}, {
							label: '周三',
							value: '周三',
						}, {
							label: '周四',
							value: '周四',
						}, {
							label: '周五',
							value: '周五',
						}, {
							label: '周六',
							value: '周六',
						}, {
							label: '周日',
							value: '周日',
						}]
					},
					{
						label: '每月',
						value: '每月',
						children: [{
							label: '1日',
							value: '1日',
						}, {
							label: '2日',
							value: '2日',
						}, {
							label: '3日',
							value: '3日',
						}, {
							label: '4日',
							value: '4日',
						}, {
							label: '5日',
							value: '6日',
						}, {
							label: '6日',
							value: '6日',
						}, {
							label: '7日',
							value: '7日',
						}, {
							label: '8日',
							value: '8日',
						}, {
							label: '9日',
							value: '9日',
						}, {
							label: '10日',
							value: '10日',
						}, {
							label: '11日',
							value: '11日',
						}, {
							label: '12日',
							value: '12日',
						}, {
							label: '13日',
							value: '13日',
						}, {
							label: '14日',
							value: '14日',
						}, {
							label: '15日',
							value: '15日',
						}, {
							label: '16日',
							value: '16日',
						}, {
							label: '17日',
							value: '17日',
						}, {
							label: '18日',
							value: '18日',
						}, {
							label: '19日',
							value: '19日',
						}, {
							label: '20日',
							value: '20日',
						}, {
							label: '21日',
							value: '21日',
						}, {
							label: '22日',
							value: '22日',
						}, {
							label: '23日',
							value: '23日',
						}, {
							label: '24日',
							value: '24日',
						}, {
							label: '25日',
							value: '25日',
						}, {
							label: '26日',
							value: '26日',
						}, {
							label: '27日',
							value: '27日',
						}, {
							label: '28日',
							value: '28日',
						}, ]
					}
				]
			}
		},
		computed: {
			...mapState(['fdd']),
			...UsersMapState(["userInfo"]),
		},
		methods: {
			...orderMapActions(['takeFundAip']),
			...UsersMapMutations(["goLogin","goReal"]),
			...UsersMapActions(['getM']),
			...ordersMapActions(['isVerifyPayPassword']),
			handleCancel(e) {
				console.log('cancel::', e)
			},

			// 支付框
			async getCode(e) {
				// console.log(e); //输入内容

				const data = await this.isVerifyPayPassword({ // 将密码发送到后台
					id: uni.getStorageSync('userid'),
					payPassword: e
				})

				if (data.data === "true") { //与后台密码对应上
					const res = await this.takeFundAip({ // 再发送基金定投数据
						buyAmount: this.val - 0,
						codeId: this.fdd.code,
						fixedDate: this.fixedDate,
						userId: uni.getStorageSync('userid')
					})
					if (res.code == 200) { //如果返回是200则说明定投成功
						this.getM()
						uni.navigateTo({
							url: "/pagesB/loansClosing/loansClosing?money=" + this.val
						})
					} else {
						uni.showToast({
							title: "定投失败",
							duration: 3000,
							icon: "none"
						})
					}
				} else {
					uni.showToast({
						title: "密码错误",
						duration: 3000,
						icon: "none"
					})
				}

			},

			yzbtn() {//控制密码框的show
				this.$refs.verify.show(); 

			},
			confirm() {
				if (this.val >= 100) {
					this.yzbtn()
				}
				uni.navigateTo({
					url: "@/pagesB/loansClosing/loansClosing"
				})

			},
			priceTap() {
				this.val = this.val.replace(/[^\d\.]|^\./g, '').replace(/\.{2}/g, '.').replace(
					/^([1-9]\d*|0)(\.\d{1,2})(\.|\d{1})?$/, '$1$2').replace(/^0\d{1}/g, '0');
			},

			//定投时间选择确定,将定投时间进行处理一符合后端的数据格式要求
			onConfirm($event, linkage) {
				let time = ''
				let data = ''
				const reg = /[\u4e00-\u9fa5]/g;
				this.valuedate = [$event.value[0], $event.value[1]]

				if (this.valuedate[0] == '每周') {
					time = 'week'
				} else if (this.valuedate[0] == '每月') {
					time = 'month'
				}
				if (this.valuedate[1].includes('日')) {
					data = this.valuedate[1].replace(reg, "")
				}
				switch (this.valuedate[1]) {
					case '周一':
						data = '1'

						break;
					case '周二':
						data = '2'
						break;
					case '周三':
						data = '3'
						break;
					case '周四':
						data = '4'
						break;
					case '周五':
						data = '5'
						break;
					case '周六':
						data = '6'
						break;
					case '周日':
						data = '7'
						break;

				}
				this.fixedDate = `${time}/${data}`
				// console.log(this.fixedDate)
			},



			//关闭时间选择
			onCancel($event) {},
			choosePay() {
				uni.showActionSheet({
					itemList: ['我的钱包', '工商银行(5510)', '农业银行(5510)', '建设银行(5510)', "中国银行(2510)"],
					success: (res) => {
						this.pay = this.payArr.filter((i, index) => index == res.tapIndex)
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			}

		},
		onLoad() {
			if (uni.getStorageSync("userid")){
				if(this.userInfo.status){
					
				}else{
					this.goReal()
				}
			}else{
				this.goLogin()
			}
		}
	}
</script>
<style scoped lang="scss">
	page {
		background-color: #FFFFFF;
	}
</style>

<style lang="scss" scoped>
	.w-670 {
		width: 670rpx;
		margin: 0 auto;
	}

	.bg-f8 {
		background: #F8F7F7;
	}

	.color-47 {
		color: #474747;
	}

	.color-99 {
		color: #999999;
	}

	.color-32 {
		color: #323232;
	}

	.fs-32 {
		font-size: 32rpx;
	}

	.fs-24 {
		font-size: 24rpx;
	}

	.fs-52 {
		font-size: 52rpx;
	}

	.btn-lg {
		height: 90rpx;
		background: #1F6CC0;
	}

	.h-90 {
		height: 90rpx;
		line-height: 90rpx;
	}

	.h-120 {
		height: 120rpx;
		line-height: 120rpx;
	}

	.h-180 {
		height: 180rpx;
		line-height: 180rpx;
	}

	input {
		margin-left: 20rpx;
		font-size: 52rpx;
	}

	.payMethod {
		padding: 50rpx 0;
	}

	.border {
		border: 1rpx solid #E6E6E6FF;
	}

	.before {
		background: #BEDDF2;
	}

	.after {
		background: #1F6CC0;
	}



	.buy {
		height: 150rpx;
		display: flex;
		align-items: center;

		.buy-left {
			width: 5%;
			font-size: 52rpx;
			font-weight: bold;
		}

		.buy-right {
			width: 50%;

			input {}

			.pld {
				font-size: 32rpx;
				color: #9A9A9A;
			}

			.num {
				height: 138rpx;
				font-size: 52rpx;
				font-weight: bold;
				color: #323232;
			}
		}

	}
</style>
